import { useState } from "react";
import { Canvas, Story, Meta } from "@storybook/blocks";
import { Button, Flex, TextInput } from "metabase/ui";
import { Modal } from "./";
import * as ModalStories from "./Modal.stories";

<Meta of={ModalStories} />

# Modal

Our themed wrapper around [Mantine Modal](https://v6.mantine.dev/core/modal/).

## Docs

- [Mantine Modal Docs](https://v6.mantine.dev/core/modal/)

## Guidelines

### Modal headings should be in sentence case.

Sentence-case fits the friendly, casual personality of Metabase. This means it should be `Add to dashboard` instead of `Add To Dashboard` for example.

<Canvas of={ModalStories.SentenceCaseTitles} />

### Headings for confirmation modals should always be a question, and the body text should elaborate on the consequences

E.g.,`Delete this database?` with body copy that contains clarifying information about what will happen if this action is taken, e.g., `This can't be undone, and questions that rely on this data will no longer work.`

<Canvas of={ModalStories.Confirmation} />

### Buttons should be right-aligned, with the primary action on the far right

This is primarily to reinforce the top-left-to-bottom-right eye travel path for left-to-right language readers.

(Research from [NN Group says it really doesn't matter that much](https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/) which side the buttons align to, so this is mostly for consistency and convention.)

### The primary button for create or neutral actions should be blue, and red for destructive actions

- Examples of “create” and neutral actions:

  - Save
  - Create
  - Invite
  - Download
  - Okay
  - Done

- Examples of “destructive” actions
  - Discard
  - Delete
  - Deactivate
  - Revoke
  - Remove

### The text for primary action buttons should always be a verb

If the title of a modal is e.g., "Add this to a dashboard," the primary action should be `Add` instead of "Yes" for example.

Or if we ask, "Reset this password?" the primary button should say `Reset`. This provides good additional confirmation to the user about what's going to happen if they click the button. Additionally, though we could write, "Yes, reset," that's unnecessarily verbose.

### The secondary action should always say `Cancel` with rare exceptions

This is for the sake of predictability, consistency, and convention.

There are some rare exceptions, like when the modal is a confirmation or a followup from a previous modal. As an example, when you save a question, we ask you in a modal if you want to add it to a dashboard. In this case, saying "cancel" is ambiguous (does this cancel saving the card?), and it makes sense for it to read `Not now`

### There should almost never be more than two buttons in a modal

There are few legitimate cases where a modal should have more than two buttons. E.g., if there were a third action that says "learn more", clicking it might open a new window, but it leaves the modal in an ambiguous state.

It’s okay for a modal to have only a single button. Here’s an example:

<Canvas of={ModalStories.SingleButton} />

### It’s okay if a modal doesn’t have body text

Sometimes it’s not necessary. Here's a modal with a heading, but no body text.

<Canvas of={ModalStories.NoBodyText} />
